<template>
  <div>
    <el-dialog :title="title" :visible.sync="getdialogVisible" width="30%">
      <el-row>
        <el-form
          :model="deptFormModel"
          :rules="deptRules"
          label-width="80px"
          ref="deptFormModel"
        >
          <el-col :span="24">
            <el-form-item label="部门名称" prop="deptname">
              <el-input v-model="deptFormModel.deptname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注信息">
              <el-input v-model="deptFormModel.remark"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" align="center">
            <el-button
              @click="HandleSave('deptFormModel')"
              size="small"
              type="primary"
              >保存信息
            </el-button>
            <el-button size="small" type="primary">清空数据</el-button>
          </el-col>
        </el-form>
      </el-row>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import { editdept } from "@/api/api";

@Component({})
export default class deptartModels extends Vue {
  @Prop(Object)
  protected dialog!: any | undefined;
  @Prop(Object)
  protected deptFormModel!: any | undefined;
  @Emit("update")
  protected update(page: number | undefined) {
    return page;
  }

  protected name!: "deptartModels";
  protected deptRules: {} | undefined = {
    deptname: [{ required: true, message: "部门名称不能为空", trigger: "blur" }]
  };

  public get getdialogVisible() {
    return this.dialog.isDialog;
  }

  public get title() {
    return this.dialog.title;
  }

  public set getdialogVisible(bool) {
    this.dialog.isDialog = bool;
  }

  public set title(title) {
    this.dialog.title = title;
  }

  protected HandleSave(name: string) {
    (this.$refs[name] as any).validate(async (volid: any) => {
      if (volid) {
        const { options } = this.dialog;
        if (options === "edit") {
          const { deptname, id, remark } = this.deptFormModel;
          const res = await editdept({
            deptname,
            id,
            remark
          });
          const { success } = res as any;
          if (success) {
            this.$message({
              type: "success",
              message: "修改成功"
            });
            await this.update(1);
            this.dialog.isDialog = false;
          } else {
            this.$message({
              type: "error",
              message: "修改失败"
            });
          }
        } else {
          const { deptname, remark } = this.deptFormModel;
          const res = await editdept({
            deptname,
            remark
          });
          const { success, message } = res as any;
          if (success) {
            this.$message({
              type: "success",
              message: "新增成功"
            });
            await this.update(1);
            this.dialog.isDialog = false;
          } else {
            this.$message({
              type: "error",
              message: message
            });
          }
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped></style>
